@import 'src/style/modules';

/*
  Alert
  ------------------------------------------------------------------------------
*/

.alert {
  width: 100%;
  border-radius: $radius;
  padding: $ix-border;
  font-size: $form-md-font;
  user-select: none;

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  ol,
  ul,
  li {
    font-weight: 600;
    strong {
      font-weight: 900;
    }

    &:first-of-type {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  p {
    font-size: $form-md-font;
  }
}

.alert--contents {
  width: 100%;
  border-radius: $radius - 1px;
  padding: $ix-marg-b;
  background-color: rgba($g3-castle, 0.85);
}

.alert--has-icon {
  padding-left: $ix-marg-d + $ix-marg-b;
  position: relative;
}

.alert--icon {
  position: absolute;
  top: 50%;
  left: $ix-marg-b + $ix-marg-a;
  transform: translateY(-50%);
  font-size: 1.5em;
  color: rgba($g3-castle, 0.85);
}

/*  Color Modifiers */
@mixin alertColorModifier($mainColor, $accentColor, $textColor, $boldColor) {
  color: $textColor;

  strong {
    color: $boldColor;
  }

  @include gradient-h($mainColor, $accentColor);
}

.alert--default {
  @include alertColorModifier($g7-graphite, $g5-pepper, $g13-mist, $g20-white);
}

.alert--primary {
  @include alertColorModifier($c-ocean, $c-star, $c-hydrogen, $g20-white);
}

.alert--secondary {
  @include alertColorModifier($c-comet, $c-star, $c-moonstone, $g20-white);
}

.alert--success {
  @include alertColorModifier(
    $c-rainforest,
    $c-viridian,
    $c-wasabi,
    $g20-white
  );
}

.alert--warning {
  @include alertColorModifier($c-pineapple, $c-thunder, $c-sulfur, $g20-white);
}

.alert--danger {
  @include alertColorModifier(
    $c-dreamsicle,
    $c-curacao,
    $c-marmelade,
    $g20-white
  );
}
